<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="gb-2312">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot</title>
    <style>
        /* 页面整体样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        /* 聊天容器样式 */
        #chat-container {
            width: 80vw;
            max-width: 800px;
            height: 90vh;
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        /* 聊天气泡样式 */
        .chat-bubble {
            border-radius: 15px;
            padding: 10px;
            margin: 5px 0;
            max-width: 80%;
            word-wrap: break-word;
        }

        /* 用户消息气泡样式 */
        .user-bubble {
            background-color: #007bff;
            color: white;
            align-self: flex-end;
        }

        /* 机器回复气泡样式 */
        .bot-bubble {
            background-color: #e0e0e0;
            align-self: flex-start;
        }

        /* 用户输入框和按钮容器 */
        #input-container {
            width: 90%;
            max-width: 700px;
            display: flex;
            margin-top: 10px;
        }

        /* 用户输入框样式 */
        #message-input {
            flex: 1;
            font-size: 16px;
            padding: 10px 15px;
            border-radius: 15px;
            border: 1px solid #ccc;
            margin-right: 10px;
        }

        /* 发送按钮样式 */
        #send-button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #send-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <!-- 聊天内容显示区域 -->
    <div id="chat-container"></div>
    
    <!-- 输入框和按钮容器 -->
    <div id="input-container">
        <input type="text" id="message-input" placeholder="输入消息...">
        <button id="send-button">发送</button>
    </div>

    <script>
        // 获取用户输入框和聊天容器元素
        const messageInput = document.getElementById('message-input');
        const chatContainer = document.getElementById('chat-container');
        const sendButton = document.getElementById('send-button');

        // 发送消息函数
        function sendMessage() {
            const userInput = messageInput.value.trim(); // 获取用户输入并去除空格
            
            if (userInput !== '') {
                // 显示用户输入的消息
                const userBubble = document.createElement('div');
                userBubble.className = 'chat-bubble user-bubble';
                userBubble.textContent = userInput;
                chatContainer.appendChild(userBubble);

                // 清空输入框
                messageInput.value = '';
                messageInput.disabled = true;

                // 创建新的聊天气泡用于显示回复
                const botBubble = document.createElement('div');
                botBubble.className = 'chat-bubble bot-bubble';
                chatContainer.appendChild(botBubble);

                // 使用 fetch 发送请求到后端API
                fetch('/api/chat', { 
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头
                    },
                    body: JSON.stringify({ input_text : userInput }) // 发送的消息内容
                })
                .then(response => {
                    const reader = response.body.getReader();
                    const decoder = new TextDecoder('utf-8');

                    function read() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                botBubble.textContent = botBubble.textContent.replace('<|im_end|>', ''); // 去掉后缀
                                messageInput.disabled = false;
                                return; // 结束读取
                            }

                            // 解码并追加文本到聊天气泡中
                            const text = decoder.decode(value);
                            botBubble.textContent += text;

                            // 继续读取
                            read();
                        });
                    }

                    read();
                })
                .catch(error => console.error('错误:', error)); // 错误处理
            }
        }

        // 监听发送按钮的点击事件
        sendButton.addEventListener('click', sendMessage);

        // 监听Enter键
        messageInput.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>
